@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
*
{
    /*外边距*/
	margin: 0; 
    /* 填充 */
	padding: 0;  
    /* 字体 定义font-family时,最好在最后加一个sans-serif,这样如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;*/
	font-family: 'Poppins', sans-serif;

}

body
{
	background: #000 url(bg.jpg);
    /* 设置背景图像是否固定或者随着页面的其余部分滚动。 */
	background-attachment: fixed;
    /* 定义了背景层的混合模式（图片与颜色） */
	background-blend-mode: hard-light;
}

.container{
	position: absolute;
	top: 80px;
	left: 100px;
	right: 100px;
	bottom: 80px;
	background: url(bg.jpg);
	background-attachment: fixed;
    /* 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素 */
	display: flex;
    /* justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 */
	justify-content: center;
    /* 元素位于容器的中心。 */
	align-items: center;
    /* 灵活的项目将垂直显示，正如一个列一样。 */
	flex-direction: column;
    /* 向 div 元素添加阴影 */
	box-shadow: 0 50px 50px rgba(0,0,0,0.5),
				0 0 0 100px rgba(0,0,0,.1);
}

.container h2 {
    /* 把文本排列到中间 */
	text-align: center;
    /* 字体大小 */
	font-size: 10em;
    /* 行高 */
	line-height: 0.7em;
	color: #333;
	margin-top: -80px;
}

.container h2 span{
    /* 此元素将显示为块级元素，此元素前后会带有换行符。 */
	display: block;
    /* 字体粗细 */
	font-weight: 300;
    /* 字母间距 */
	letter-spacing: 6px;
	font-size: 0.2em;
}
.countdown{
	display: flex;
	margin-top: 50px;
}
.countdown div{
	position: relative;
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	background: #333;
	color: #fff;
	margin: 0 15px;
	font-size: 3em;
	font-weight: 500;
}
.countdown div:before{
	content: '';
	position: absolute;
	bottom: -30px;
	left: 0;
	width: 100%;
	height: 35px;
	background: #ff0;
	color: #333;
	font-size: 0.35em;
	line-height: 35px;
	font-weight: 300;
}
.container #day:before{
	content: 'Days';
}
.container #hour:before{
	content: 'Hours';
}
.container #minute:before{
	content: 'Minutes';
}
.container #second:before{
	content: 'Seconds';
}